/**
 * author: xiekun
 * description: 数组hook的各种配置
 * createdBy: 2024-02-28 
 **/

import { UseArrayEnums } from '@/shared/enums/array'
import { useArrayFilter } from '@vueuse/core'

export class ArrayConfig {
  map: Map<UseArrayEnums, Object>
  key: UseArrayEnums
  constructor(key: UseArrayEnums) {
    this.key = key;
    this.map = new Map([])
    const { BASE_CONFIG } = this.init();
    this.map.set(UseArrayEnums.USE_ARRAY_FILTER, BASE_CONFIG)
    this.map.set(UseArrayEnums.USE_ARRAY_EVERY, BASE_CONFIG)
    this.map.set(UseArrayEnums.USE_ARRAY_UNIQUE, BASE_CONFIG)
    this.map.set(UseArrayEnums.USE_ARRAY_SOME, BASE_CONFIG)
    this.map.set(UseArrayEnums.USE_ARRAY_MAP, BASE_CONFIG)
  }
  init() {
    // 说明
    const  description = [
      {
        label: '1、传入一个数组，与一个函数，返回一个新数组。',
        key: UseArrayEnums.USE_ARRAY_FILTER
      },
      {
        label: '2、不改变原数组，响应式过滤元素，返回一个响应式新数组；如果没满足条件的则返回一个空数组',
        key: UseArrayEnums.USE_ARRAY_FILTER
      },
      {
        label: '1、传入一个数组，与一个函数，返回一个布尔值。',
        key: UseArrayEnums.USE_ARRAY_EVERY
      },
      {
        label: '2、数组里的每个元素（元素都为响应式值）都会执行这个函数，只要有一个元素结果为 false，useArrayEvery 的返回值就为 false；所有元素执行函数结果都为 true，useArrayEvery 的返回值就为 true。',
        key: UseArrayEnums.USE_ARRAY_EVERY
      },
      {
        label: '3、修改数组里某一位元素的值后，useArrayEvery 的结果也会随之改变。',
        key: UseArrayEnums.USE_ARRAY_EVERY
      },
      {
        label: '1、传入一个数组，返回一个去重新数组。',
        key: UseArrayEnums.USE_ARRAY_UNIQUE
      },
      {
        label: '1、传入一个数组，与一个函数，返回一个布尔值',
        key: UseArrayEnums.USE_ARRAY_SOME
      },
      {
        label: '2、判断数组中是否存在符合条件的元素。如果存在，则返回true，否则返回false。',
        key: UseArrayEnums.USE_ARRAY_SOME
      },
      {
        label: '1、传入几个数组，以一个函数，返回一个新数组',
        key: UseArrayEnums.USE_ARRAY_MAP
      }
    ]
    // 参数
    const paramter = {
      [UseArrayEnums.USE_ARRAY_FILTER]: `<span class="active">useArrayFilter</span>(list :<span class="active">Array</span>, fn :<span class="active">Function</span>) :<span class="active">Array</span>`,
      [UseArrayEnums.USE_ARRAY_EVERY]: `<span class="active">useArrayEvery</span>(list :<span class="active">Array</span>, fn :<span class="active">Function</span>) :<span class="active">Boolean</span>`,
      [UseArrayEnums.USE_ARRAY_UNIQUE]: `<span class="active">useArrayUnique</span>(list :<span class="active">Array</span>) :<span class="active">Array</span>`,
      [UseArrayEnums.USE_ARRAY_SOME]: `<span class="active">useArrayEvery</span>(list :<span class="active">Array</span>, fn :<span class="active">Function</span>) :<span class="active">Boolean</span>`,
      [UseArrayEnums.USE_ARRAY_MAP]: `<span class="active">useArrayMap</span>(list :<span class="active">Array</span>, fn :<span class="active">Function</span>) :<span class="active">Array</span>`,

    }
    // 使用
    const use = {
      [UseArrayEnums.USE_ARRAY_FILTER]: `<p class="description-details">
                                            import { useArrayFilter } from "@vueuse/core"</p>
                                          <p class="description-details">
                                            let arr = [1,2,3,4]
                                          </p>
                                          <p class="description-details">
                                              let handleArr = useArrayFilter(arr, i => i > 2)
                                          </p>
                                          <p class="description-details">
                                          结果：handleArr.value // 【3，4】
                                          </p>`,
      [UseArrayEnums.USE_ARRAY_EVERY]: `<p class="description-details">
                                          import { useArrayEvery } from "@vueuse/core"
                                        </p>
                                        <p class="description-details">
                                          import {ref} from "vue"
                                        </p>
                                        <p class="description-details">
                                          const list = ref([0, 2, 4, 6, 8]);
                                        </p>
                                        <p class="description-details">
                                          const result = useArrayEvery(list, (i) => i % 2 === 0);
                                        </p>
                                        <p class="description-details">
                                          list.value.push(4);
                                        </p>
                                        <p class="description-details">
                                          console.log(result.value); //true
                                        </p>
                                        <p class="description-details">
                                          list.value[2] = 3;
                                        </p>
                                        <p class="description-details">
                                          console.log(result.value); //false
                                        </p>`,
      [UseArrayEnums.USE_ARRAY_UNIQUE]: `<p class="description-details">
                                          import { useArrayUnique } from "@vueuse/core"
                                        </p>
                                        <p class="description-details">
                                          let arr = [1,2,3,4,1]
                                        </p>
                                        <p class="description-details">
                                          let handleArr = useArrayUnique(arr)
                                        </p>
                                        <p class="description-details"> 
                                            结果：handleArr.value // 【1,2,3,4】
                                        </p>`,
      [UseArrayEnums.USE_ARRAY_SOME]: `<p class="description-details">
                                          import { useArraySome } from "@vueuse/core"
                                        </p>
                                        <p class="description-details">
                                          import {ref} from "vue"
                                        </p>
                                        <p class="description-details">
                                          const list = ref([0, 2, 4, 6, 8]);
                                        </p>
                                        <p class="description-details">
                                          const result = useArraySome(list, (i) => i > 2);
                                        </p>
                                        <p class="description-details">
                                          console.log(result.value); //true
                                        </p>
                                        <p class="description-details">
                                          const result = useArraySome(list, (i) => i > 8);
                                        </p>
                                        <p class="description-details">
                                          console.log(result.value); //false
                                        </p>`,
          [UseArrayEnums.USE_ARRAY_MAP]: `<p class="description-details">
                                        import { useArrayMap } from "@vueuse/core"
                                      </p>
                                      <p class="description-details">
                                        import {ref} from "vue"
                                      </p>
                                      <p class="description-details">
                                        const list = ref([0, 2, 4, 6, 8]);
                                      </p>
                                      <p class="description-details">
                                        const result = useArraySome(list, (i) => i * 2);
                                      </p>
                                      <p class="description-details">
                                        console.log(result.value); // [0,4,8,12,16]
                                      </p>`
      }
    const desc = useArrayFilter(description, item => item.key == this.key)
    const param = paramter[this.key]
    const useDesc = use[this.key]
    const BASE_CONFIG = {
      desc,
      param,
      useDesc
    }
    return{
      BASE_CONFIG
    }
  }
  getConfig() {
    return this.map.get(this.key)
  }
}